<template>
    <div class="list">
        <img :src="item.picture" alt="">
        <section>
            <h5>{{item.name}}</h5>
            <p>{{item.min_price}}</p>
            <!-- 事件修饰符  阻止事件冒泡 -->
            <button @click.stop="addCart(item)">添加</button>
        </section>
    </div>
</template>
<script>
import {reactive,toRefs} from 'vue'
import {useStore} from 'vuex'
export default {
    props:['item'],
    setup(props) {
        const {commit} = useStore()
        const addCart = (item)=>{
            commit('addCart',item)



        }
        return {addCart}
    }

}
</script>
<style lang="scss" scoped>
.list{
    display:flex;
    margin: 10px 16px;
    section{
        flex:1;
        
    }
    img{
        width:60px;
        height: 60px;
        margin: 0 10px;
    }
}
</style>
